<template>
	<div class="right-box">
		<Breadcrumb style="margin-bottom: 5px;">
	        <BreadcrumbItem>
	            <Icon type="ios-people" color="red" size="18"></Icon> 系统管理
	        </BreadcrumbItem>
	        <BreadcrumbItem>
	            角色管理
	        </BreadcrumbItem>
	    </Breadcrumb>
	     <Button class="addBtn" @click="addUserModel"  v-if="userType==0">新增角色</Button>
	    <Input search enter-button="搜索" placeholder="请输入相关信息..." class="search-input" v-model="search" @on-search="searchUser"/>
	    <Table height="480" :columns="columns1" :data="datas">
	    	<template slot-scope="{ row, index }" slot="type" >
	    		<span v-show="row.userType == 0">超级管理员</span>
	    		<span v-show="row.userType == 1">部门管理员</span>
	    		<span v-show="row.userType == 2">普通用户</span>
	       </template>
	    	<template slot-scope="{ row, index }" slot="action" >
	            <Button type="primary" style="margin-top: 5px" @click="editInfo(row)" v-if="userType==0">修改信息</Button>
	            <Button type="primary" style="margin-top: 5px" @click="editPsd(row)" v-if="userType==0">修改密码</Button>
	            <Button type="error" style="margin-top: 5px" @click="remove(row)"  v-if="userType==0">删除</Button>
	        </template>
	    </Table>
	    <Modal
        title="请按要求完善表单"
        v-model="modelShow"
        :closable="false" @on-ok="checkSure" @on-cancel="handleReset('formValidate')" :styles="{top: '20px'}">
	        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
		        <FormItem label="角色昵称" prop="nickname">
		            <Input v-model="formValidate.nickname" placeholder="请输入角色昵称"></Input>
		        </FormItem>
		        <FormItem label="角色账号" prop="name">
		            <Input v-model="formValidate.name" placeholder="请输入角色账号"></Input>
		        </FormItem>
		        <FormItem label="角色密码" prop="psd">
		            <Input v-model="formValidate.psd" placeholder="请输入角色密码"></Input>
		        </FormItem>
		        <FormItem label="角色地址" prop="address">
		            <Input v-model="formValidate.address" placeholder="请输入角色地址"></Input>
		        </FormItem>
		        <FormItem label="角色年龄" prop="age">
		            <Input v-model="formValidate.age" placeholder="请输入角色年龄"></Input>
		        </FormItem>
		        <FormItem label="角色性别" prop="sex">
		            <Select v-model="formValidate.sex">
		                <Option value="男">男</Option>
		                <Option value="女">女</Option>
		            </Select>
		        </FormItem>
		        <FormItem label="角色职位" prop="duty">
		            <Input v-model="formValidate.duty" placeholder="请输入角色职位"></Input>
		        </FormItem>
		        <FormItem label="角色类型" prop="type">
		            <Select v-model="formValidate.type">
		                <Option value="0">超级管理员</Option>
		                <Option value="1">部门管理员</Option>
		                <Option value="2">普通用户</Option>
		            </Select>
		        </FormItem>
		        <FormItem label="所属部门" prop="belongs">
		            <Select v-model="formValidate.belongs">
		                <Option :value="list.departmentId" v-for="(list,index) in departs" :key="index">{{list.departmentName}}</Option>
		            </Select>
		        </FormItem>
		    </Form>
	    </Modal>
	    
	  	<Modal
        title="请填写修改内容"
        v-model="modelPsd"
        :closable="false" @on-ok="checkSure2"  @on-cancel="handleReset('formValidate2')">
	        <Form ref="formValidate2" :model="formValidate2" :rules="ruleValidate2" :label-width="80">
		        <FormItem label="旧密码" prop="oldpsd">
		            <Input v-model="formValidate2.oldpsd" placeholder="请输入旧密码"></Input>
		        </FormItem>
		        <FormItem label="新密码" prop="newpsd">
		            <Input v-model="formValidate2.newpsd" placeholder="请输入新密码"></Input>
		        </FormItem>
		    </Form>
	    </Modal>
	    
	  	<Modal
        title="请填写修改内容"
        v-model="modelInfo"
        :closable="false" @on-ok="checkSure3"  @on-cancel="handleReset('formValidate3')">
	        <Form ref="formValidate3" :model="formValidate3" :rules="ruleValidate3" :label-width="80">
		        <FormItem label="地址" prop="address">
		            <Input v-model="formValidate3.address" placeholder="请输入地址"></Input>
		        </FormItem>
		        <FormItem label="性别" prop="sex">
		            <Input v-model="formValidate3.sex" placeholder="请输入性别"></Input>
		        </FormItem>
		        <FormItem label="年龄" prop="age">
		            <Input v-model="formValidate3.age" placeholder="请输入年龄"></Input>
		        </FormItem>
		    </Form>
	    </Modal>
	</div>
</template>

<script>
	export default{
		name:'rolesManager',
		data(){
			return{
				search:'',
				modelInfo:false,
				modelPsd:false,
				modelShow:false,
				formValidate2: {
                    oldpsd:'',
                    newpsd:''
                },
                ruleValidate2: {//表单校验规则
                    oldpsd: [
                        { required: true, message: '旧密码不能为空', trigger: 'blur' }
                    ],
                    newpsd: [
                        { required: true, message: '新密码不能为空', trigger: 'blur' }
                    ]
                },
                formValidate3: {
                    address:'',
                    sex:'',
                    age:''
                },
                ruleValidate3: {//表单校验规则
                    address: [
                        { required: true, message: '地址不能为空', trigger: 'blur' }
                    ],
                    sex: [
                        { required: true, message: '性别不能为空', trigger: 'blur' }
                    ],
                    age: [
                        { required: true, message: '年龄不能为空', trigger: 'blur' }
                    ]
                },
				formValidate: {
                    name: '',
                    nickname:'',
                    psd:'',
                    address:'',
                    age:'',
                    duty:'',
                    sex:'',
                    type:'',
                    belongs:''
                },
                ruleValidate: {//表单校验规则
                    name: [
                        { required: true, message: '请输入角色账号', trigger: 'blur' }
                    ],
                    nickname: [
                        { required: true, message: '请输入角色昵称', trigger: 'blur' }
                    ],
                    psd: [
                        { required: true, message: '请输入角色密码', trigger: 'blur' }
                    ],
                    address: [
                        { required: true, message: '请输入角色地址', trigger: 'blur' }
                    ],
                    age: [
                        { required: true, message: '请输入角色年龄', trigger: 'blur' }
                    ],
                    duty: [
                        { required: true, message: '请输入角色职位', trigger: 'blur' }
                    ],
                    sex: [
                        { required: true, message: '请选择角色性别', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, message: '请选择角色类型', trigger: 'blur' }
                    ],
                    belongs: [
                        { required: true, message: '请选择所属部门', trigger: 'blur' }
                    ]
                },
				columns1: [//表头
                    {
                        title: '角色账号',
                        key: 'username'
                    },
                    {
                        title: '角色昵称',
                        key: 'nickName'
                    },
                    {
                        title: '角色密码',
                        key: 'password'
                    },
                    {
                        title: '账户类型',
                        key: 'userType',
                        slot:'type'
                    },
                    {
                        title: '角色性别',
                        key: 'sex'
                    },
                    {
                        title: '角色年龄',
                        key: 'age'
                    },
                    {
                        title: '角色职位',
                        key: 'userDuties'
                    },
                    {
                        title: '角色地址',
                        key: 'address'
                    },
                    {
                        title: '所属部门',
                        key:'departmentName'
                    },
                    {
                        title: '部门编码',
                        key: 'userCode'
                    },{
                    	title:'操作',
                    	slot:'action'
                    }
                ],
				datas:[],//表格数据
				departs:[],
				userType:0
			}
		},
		methods:{
			addUserModel(){//新增角色
				this.modelShow = true
			},
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            handleSubmit(name) {//验证表单
               this.$refs[name].validate((valid) => {
                    if (valid) {//验证通过
                    	if(name == 'formValidate'){
                    		this.addUser()
                    	}else if(name == 'formValidate2'){
                    		this.submitPSW()
                    	}else if(name == 'formValidate3'){
                    		this.submitInfo()
                    	}
                    } else {//验证不通过
                        this.$Message.error('请按要求完善表单!');
                        this.handleReset('formValidate')
                    }
                })
            },
			checkSure(){//点击弹窗确定 验证表单
				this.handleSubmit('formValidate')
			},
			checkSure2(){//点击弹窗确定 验证表单
				this.handleSubmit('formValidate2')
			},
			checkSure3(){//点击弹窗确定 验证表单
				this.handleSubmit('formValidate3')
			},
			remove(row){//删除用户
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/deleteUser',
	    			data:{
	    				userId:row.userId
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code == 200){
	    				this.getUser()
	    				this.datas = res.data.userList
	    			}else{
	    				this.$Message.error(res.data.msg);
	    			}
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			},
			searchUser(){//搜索方法 点击搜索、或者按回车键都能触发
				if(this.search == ''){this.getUser();return}
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/selectUserNickName',
	    			data:{
	    				nickName:that.search
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code == 200){
	    				this.datas = res.data.userList
	    			}else{
	    				this.$Message.error(res.data.msg);
	    			}
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			},
			editInfo(row){
				this.formValidate3.id = row.userId
				this.modelInfo = true
			},
			editPsd(row){
				this.formValidate2.id = row.userId
				this.modelPsd = true
			},
			submitInfo(){//提交修改信息
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/modifyUser',
	    			data:{
	    				userId:that.formValidate3.id,
	    				address:that.formValidate3.address,
	    				sex:that.formValidate3.sex,
	    				age:that.formValidate3.age
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code==200){
	    				this.getUser()
                    	this.$Message.success(res.data.msg);
                    	this.getInfo()
	    				return
	    			}
                    this.$Message.error(res.data.msg);
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			},
			submitPSW(){//提交修改密码
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/modifyUserPassword',
	    			data:{
	    				userId:that.formValidate2.id,
	    				oldPassword:that.formValidate2.oldpsd,
	    				newPassword:that.formValidate2.newpsd
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code==200){
	    				this.getUser()
                    	this.$Message.success(res.data.msg);
	    				return
	    			}
                    this.$Message.error(res.data.msg);
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			},
			addUser(){ // 新增角色
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/register',
	    			data:{
	    				username:that.formValidate.name,
	    				nickName:that.formValidate.nickname,
	    				password:that.formValidate.psd,
	    				departmentId:that.formValidate.belongs,
	    				userType:that.formValidate.type,
	    				address:that.formValidate.address,
	    				sex:that.formValidate.sex,
	    				age:that.formValidate.age,
	    				userDuties:that.formValidate.duty
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code == 200){
	    				this.$Message.success(res.data.msg)
	    				this.getUser()
	    			}else{
	    				this.$Message.error(res.data.msg);
	    			}
	    		}).catch(function(err){
	    			console.log(err)
	    		})			
			},
			getUser(){ // 获取用户列表
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/getUser',
	    			data:{
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code == 200){
	    				this.datas=[]
	    				res.data.userList.forEach(i=>{
	    					this.departs.forEach(j=>{
	    						if(i.departmentId == j.departmentId){
	    							i.departmentName = j.departmentName
	    						}
	    					})
	    					this.datas.push(i)
	    				})
	    				
	    			}else{
	    				this.$Message.error(res.data.msg);
	    			}
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			},
			getDepartment(){ // 获取部门列表
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/getDepartment',
	    			data:{
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code == 200){
	    				this.departs = res.data.departmentList
	    			}else{
	    				this.$Message.error(res.data.msg);
	    			}
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			}
		},
		created(){
			this.getDepartment()
			setTimeout(()=>{
				this.getUser()
			},500)
			
			this.userType=this.LS.getLS('userType')
		}
	}
</script>

<style scoped>
.right-box{
	width: 100%;
	height: 100%;
	position: relative;
}
.addBtn{
	position: absolute;
	top: -10px;
	right: 20px;
}
.page-nav{
	width: 100%;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	display: flex;
	justify-content: center;
	align-content: center;
	margin-top: 10px;
}
.search-input{
	width:40%;
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}
</style>